<!-- 底部导航栏 -->
<template>
    <div id="bnav">
       <router-link :class="{act:active=='index'}" to="/index">
       <p class="bnavIcon"><i class="fa fa-home"></i></p>
       <p>首页</p> 
       </router-link>
       <router-link :class="{act:active=='ctg'}" to="/ctg">
       <p class="bnavIcon"><i class="fa fa-list-ul"></i></p>
      <p> 分类</p>
       </router-link>
       <router-link :class="{act:active=='spcart'}" to="/spcart">
       <p class="bnavIcon"><i class="fa fa-shopping-cart"></i></p>
       <p>购物车</p>
       </router-link>
       <router-link :class="{act:active=='order'}" to="/order">
       <p class="bnavIcon"><i class="fa fa-file-text-o"></i></p>
       <p>订单</p>
       </router-link>
       <router-link :class="{act:active=='mine'}" to="/mine">
       <p class="bnavIcon"><i class="fa fa-smile-o"></i></p>
       <p>我的</p>
       </router-link>
    </div>
</template>
<script>
//获取屏幕的宽度
	var clientWidth=window.screen.width;
	//获取根标签
	var html=document.getElementsByTagName('html')[0];
	//设置根元素的font-size
	html.style.fontSize=clientWidth/20+'px';
export default {
    props:['active'],

}
</script>
<style>
#bnav{
    position: fixed;
    bottom: 0;
    z-index: 10;
    width:100%;
    height: 3.125rem;
    border-top: 0.06rem solid #d9d9d9;
    background-color: #fff;
    font-size: 0.7rem;
    display:flex;
    justify-content: space-around;
}
a{
    color:#999;
}
.bnavIcon{
    font-size: 1.45rem;
}
.act{
 color:green;
}
</style>


